<template>
  <div class="dashboard-container" align="center">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleSelectionChange"
        >修改密码
        </el-button>
      </div>
      <div class="text item">姓名: {{form.adminName}}</div>
      <div class="text item">
        <el-row>
          <el-col v-if="telSwitch==false">
            手机号码:
            {{form.adminTel}}
          </el-col>
          <el-col v-else>
            手机号码:
            <el-input v-model="form.adminTel" style="width: 8rem" size="small" @change="telChange"></el-input>
          </el-col>
          <i @click="forTelSwitch" v-if="telSwitch==false" style="float: right;margin-top: -16px;margin-right: 20rem"
             class="el-icon-edit"/>
          <i @click="forTelSwitch" v-else style="float: right;margin-top: -22px;margin-right: 19rem"
             class="el-icon-close"/>
        </el-row>
      </div>

      <div class="text item">用户名: {{ form.loginName }}</div>
      <div class="text item">登录时间: {{ form.lastLogin }}</div>
    </el-card>
    <el-dialog
      title="更改密码"
      :visible.sync="dialogTableVisible"
      center
      :closeOnClickModal="false"
      :append-to-body="true"
      :lock-scroll="false"
      width="50%"
    >
      <el-form>
        <el-form-item>
          <span slot="label">原密码</span>
          <el-input v-model="password" type="text" placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">新密码</span>
          <el-input v-model="newpassword" type="text" placeholder="请输入至少六位字符的密码,可包含（-*/+.~!@#$%^&*()）"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label">确认密码</span>
          <el-input v-model="confirmpassword" type="text" placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <el-form-item align="center">
          <el-button type="primary" @click="changePass">确认更改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import $ from "@/api/dashboard";

  export default {
    data() {
      return {
        form: {
          adminId:undefined,
          adminName: "",
          adminTel: "",
          loginName: "",
          lastLogin: "",
          loginPass: "",
        },
        // 姓名开关
        nameSwitch: false,
        // 电话开关
        telSwitch: false,
        dialogTableVisible: false,
        telNumber:"",
        password: "",
        newpassword: "",
        confirmpassword: "",
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        $.getInfo().then(response => {
          if (response.success) {
            // console.log(response.data.tbAdm)
            this.form = response.data.tbAdm
            this.telNumber=response                                                                                         .data.tbAdm.adminTel
          }
        });
      },
      handleSelectionChange() {
        this.dialogTableVisible = true;
      },
      // 手机号开关
      forTelSwitch() {
        if (this.telSwitch == true) {
          this.telSwitch = false
        } else {
          this.telSwitch = true
        }
      },
      // 手机号修改
      telChange() {
        this.telSwitch = false
        if (!/^1[0-9]{10}$/.test(this.form.adminTel)) {
          this.form.adminTel=this.telNumber
          this.$message({
            type: "error",
            message: "请输入正确的手机号"
          })
          return
        }
        $.tbAdmUpdate(this.form).then(res => {
          // console.log(res.data)
          this.$message({
            type: "success",
            message: "手机号已修改"
          });
        });
      },
      changePass() {
        if (!/^[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,}$/.test(this.newpassword)) {
          this.$message({
            type: "error",
            message: "请输入符合规则的密码"
          });
          this.password = "";
          this.newpassword = "";
          this.confirmpassword = "";
        } else if (this.newpassword != this.confirmpassword) {
          this.$message({
            type: "error",
            message: "确认密码不一致"
          });
          this.password = "";
          this.newpassword = "";
          this.confirmpassword = "";
        } else {
          this.form.loginPass = this.newpassword
          $.tbAdmPassUpdate({admId:this.form.adminId,loginPassOld:this.password,loginPassNew:this.newpassword}).then(res => {
            // console.log(res.data)
            if (res.data == "原密码错误") {
              this.password = "";
              this.newpassword = "";
              this.confirmpassword = "";
              this.$message({
                type: "error",
                message: "原密码不正确"
              });
            } else {
              this.dialogTableVisible = false;
              this.$message({
                type: "success",
                message: "修改成功,你的新密码是: " + this.newpassword
              });
              this.password = "";
              this.newpassword = "";
              this.confirmpassword = "";
            }
          });
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
